<template>
    <view class="question-list">
        <scroll-view class="list-container" scroll-y>
            <view 
                class="question-item" 
                v-for="(item, index) in questionList" 
                :key="index"
                @tap="toggleQuestion(index)"
            >
                <view class="question">
                    <text class="q-text">{{ item.question }}</text>
                    <text class="arrow" :class="{ 'open': item.isOpen }">></text>
                </view>
                <view class="answer" v-if="item.isOpen">
                    {{ item.answer }}
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mineApi } from '@/api'
export default {
    data() {
        return {
            questionList: []
        }
    },
    onShow() {
        this.getQuestionList()
    },
    methods: {
        toggleQuestion(index) {
            this.questionList[index].isOpen = !this.questionList[index].isOpen
        },
        getQuestionList() {
            mineApi.getQuestionList().then(res => {
                this.questionList = res.data
            })
        }
    }
}
</script>

<style lang="scss">
.question-list {
    min-height: 100vh;
    background-color: #f8f8f8;
    
    .list-container {
        padding: 20rpx;
        box-sizing: border-box;
        
        .question-item {
            background-color: #fff;
            border-radius: 12rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .question {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .q-text {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                    font-weight: 500;
                }
                
                .arrow {
                    font-size: 28rpx;
                    color: #999;
                    transform: rotate(90deg);
                    transition: transform 0.3s;
                    
                    &.open {
                        transform: rotate(-90deg);
                    }
                }
            }
            
            .answer {
                margin-top: 20rpx;
                font-size: 26rpx;
                color: #666;
                line-height: 1.6;
            }
        }
    }
}
</style> 